
{% macro ImageUp() %}
    <div id="image-upload-wrapper" class="d-flex flex-wrap align-items-center">
        <div id="upload-container" class="p-2 d-flex align-items-center justify-content-center image-box"
            style="flex: 1 1 25%; max-width: 25%; aspect-ratio: 1/1; overflow: hidden;">
            <label for="image-upload-input"
                class="rounded shadow d-flex align-items-center justify-content-center"
                style="width: 100%; height: 100%; object-fit: cover; cursor: pointer; background: #f0f0f0;">
                <span class="fs-1">+</span>
            </label>
            <input type="file" id="image-upload-input" multiple accept="image/*" style="display: none;"
                onchange="handleImageUpload(event)">
        </div>

        <div id="uploaded-images" class="d-flex flex-wrap"></div>
    </div>
    <div id="image-modals"></div>

    <script>
        function handleImageUpload(event) {
            const files = event.target.files;
            const container = document.getElementById("uploaded-images");
            const modalContainer = document.getElementById("image-modals");

            Array.from(files).forEach((file, index) => {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const imageSrc = e.target.result;
                    const imageIndex = document.querySelectorAll("#uploaded-images .image-box").length;

                    // 创建外部容器
                    const imageWrapper = document.createElement("div");
                    imageWrapper.classList.add("p-2", "d-flex", "align-items-center", "justify-content-center", "image-box");
                    imageWrapper.style.flex = "1 1 25%";
                    imageWrapper.style.maxWidth = "25%";
                    imageWrapper.style.aspectRatio = "1/1";
                    imageWrapper.style.overflow = "hidden";

                    // 创建图片
                    const imgElem = document.createElement("img");
                    imgElem.src = imageSrc;
                    imgElem.classList.add("rounded", "shadow");
                    imgElem.style.width = "100%";
                    imgElem.style.height = "100%";
                    imgElem.style.objectFit = "cover";
                    imgElem.style.cursor = "pointer";
                    imgElem.setAttribute("data-bs-toggle", "modal");
                    imgElem.setAttribute("data-bs-target", "#imageModal" + imageIndex);
                    imgElem.onclick = function() { setImageSrc(imageSrc, imageIndex); };

                    imageWrapper.appendChild(imgElem);

                    // **确保上传图标始终在第一位**
                    container.insertBefore(imageWrapper, container.firstChild);

                    // 创建模态框
                    const modal = `
                        <div class="modal fade" id="imageModal${imageIndex}" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-body text-center">
                                        <img id="modalImage${imageIndex}" src="" class="img-fluid rounded shadow">
                                    </div>
                                </div>
                            </div>
                        </div>`;
                    modalContainer.innerHTML += modal;
                };
                reader.readAsDataURL(file);
            });
        }

        function setImageSrc(imageSrc, index) {
            document.getElementById('modalImage' + index).src = imageSrc;
        }
    </script>
{% endmacro %}


